<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            #container {
                width: 100%;
                height: 800px;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="./js/echarts_map.js"></script>
        <script type="text/javascript" src="json/china.js"></script>
        <script>
            var myChart = echarts.init(document.getElementById("container"));
            // 获取对应省的文件,15.js对应内蒙
            $.getJSON('json/geometryProvince/15.js', function (geoJson) {
                // 传入id:15
                echarts.registerMap(15, geoJson);
                myChart.setOption(option = {
                    visualMap: {
                        min: 0,
                        max: 10,
                        text: ['High', 'Low'],
                        seriesIndex: [1],                   //必须设置此项,否则会覆盖标注点颜色
                        realtime: true,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue', 'yellow', 'orangered']
                        },
                        textStyle: {
                            color: 'lime'
                        }
                    },
                    geo: {
                        //id:15
                        map: 15,
                        roam: true,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#3ebee6'                        //省份字体颜色
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: null,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [
                        {
                            roam: true,
                            type: 'scatter',
                            coordinateSystem: 'geo'
                        }
                    ]
                });
            });

        </script>
    </body>

</html>
